<template>
  <div class="noticeTempAdd">
    <div class="btns">
      <div>{{form.id ? '编辑' : '新增'}}模板</div>
      <div>
        <el-button icon="CircleClose" size="large" @click="doClose(false)">关闭</el-button>
        <el-button type="success" icon="Check" size="large" @click="doSave">保存</el-button>
      </div>
    </div>
    <div class="content">
      <el-card shadow="never">
        <template #header>
          <el-icon color="#ffffff"><Tickets /></el-icon>
          <span class="title">模板信息</span>
        </template>
        <template #default>
          <el-form :model="form" :rules="rules" label-width="85px" size="large" ref="formRef">
            <el-form-item label="模板名称:" prop="name" required>
              <el-input v-model="form.name" placeholder="请输入通知名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="标题:" prop="title" required>
              <el-input v-model="form.title" placeholder="请输入通知名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="描述:" prop="desc" required style="width: 50%;">
              <el-input v-model="form.desc" type="textarea" :rows="3" placeholder="请输入描述"></el-input>
            </el-form-item>
            <el-form-item label="是否启用:" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="内容:" prop="content" required style="width: 100%;">
              <tinymce-editor ref="editorRef" v-model="form.content" isText @onGetText="getText"></tinymce-editor>
            </el-form-item>
          </el-form>
        </template>
      </el-card>
      <el-card shadow="never">
        <template #header>
          <el-icon color="#ffffff"><Document /></el-icon>
          <span class="title">内容参数</span>
        </template>
        <template #default>
          <el-table :data="form.dataList" border>
            <el-table-column label="序号" type="index" align="center" width="60"/>
            <el-table-column label="参数名称" prop="name" align="center"></el-table-column>
            <el-table-column label="参数说明" prop="value" align="center">
              <template #default="{row}">
                <el-input v-model="row.value" placeholder="请输入" clearable></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup name="noticeTempAdd">
  import { ref, getCurrentInstance } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  // 定义父组件传入的值
  const props = defineProps({
    noticeId: {
      type: String,
      default: '',
      required: true
    }
  })
  const emits = defineEmits(['close'])
  const formRef = ref(null)
  const editorRef = ref(null)

  let form = ref({
    id: '',
    name: '',
    title: '',
    desc: '',
    status: '1',
    content: '',
    dataList: []
  })
  let rules = ref({
    name: [{ required: true, message: '请输入模板名称', trigger: ['blur', 'change'] }],
    title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
    desc: [{ required: true, message: '请输入描述', trigger: ['blur', 'change'] }],
    content: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }]
  })
  

  init()
  // 编辑时候初始化数据
  function init() {
    if(!props.noticeId) {
      return
    }
    form.value.id = props.noticeId
  }

  // 保存
  function doSave() {
    formRef.value.validate((valid) => {
      if (valid) {
        currentThis.$messageBox.confirm(`确认${currentData.form.roleId ? '修改' : '新增'}吗？`).then(() => {
          let loading = currentThis.$loading(`正在${currentData.form.roleId ? '修改' : '新增'}`)
          saveOrUpdateRoleApi(`${currentData.form.roleId ? 'update' : 'save'}`, currentData.form).then(res => { // 修改
            loading.close()
            if(res.code === '200') {
              currentThis.$message.success(res.message)
              currentData.show = false
              if(currentData.form.roleId) {
                load(currentData.query.current)
              } else {
                load(1)
              }
            } else {
              currentThis.$message.error(res.message)
            }
          })
        }).catch(() => {})
      } else {
        return false;
      }
    })
  }

  // 根据内容获取内容参数列表
  function getText(e) {
    let list = e.match(/(\{){1}[a-zA-Z]+(\}){1}/g)
    let arr = []
    list.forEach(item => {
      arr.push({name: item.replace(/\{|\}/g, ''), value: ''}) // 去除字符串中的{，}字符
    })
    form.value.dataList = arr
  }

  // 关闭
  function doClose(e) {
    editorRef.value.destroyEditor()
    formRef.value.resetFields()
    emits('close', e)
  }
</script>

<style lang="less" scoped>
.noticeTempAdd{
  padding: 0 80px;
  .btns{
    height: 8vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div{
      width: 50%;
      &:first-child{
        font-size: 25px;
        font-weight: bold;
      }
      &:last-child{
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .content{
    height: 92vh;
    overflow: hidden auto;
    :deep(.el-card){
      margin-bottom: 15px;
      .el-card__header{
        display: flex;
        align-items: center;
        background: #3BB9F1;
        .el-icon{
          margin-right: 5px;
        }
        .title{
          color: #ffffff;
        }
      }
      .el-card__body{
        .el-form{
          .el-form-item {
            width: 31%;
            .el-input{
              width: 300px
            }
          }
        }
      }
    }
  }
}
</style>